<template>
	<view class="container">
		<block v-if="store">
			<view class="image-content">
				<image :mode="aspectFit" :src="store.storeImg"></image>
			</view>
			<view class="tui-content-box">
				<view class="tui-content">{{ store.storeName }}！</view>
				<view class="tui-content">猫咪博物馆 | 柯尔鸭俱乐部 | 安哥拉巨兔体验馆 | 神兽羊驼主题馆</view>
				<view class="tui-content">
					这是一家超火、超治愈的体验馆</view>
				<view class="tui-content">这里不仅能撸羊驼</view>
				<view class="tui-content">还能撸猫咪，撸兔纸，撸鸭子</view>
				<view class="tui-content">重装开幕，炫彩升级，优惠多多</view>
				<view class="tui-content">体验感更强，空气更清新，环境更美好</view>

			</view>
			<view class="tui-list-cell">
				<view class="tui-bold tui-cell-title">促销</view>
				<view>
					<view class="tui-promotion-box">
						<tui-tag originLeft padding="12rpx 24rpx" :scaleMultiple="0.8" shape="circle" type="red" plain>多买优惠</tui-tag>
						<text>满1件，立减最低1件商品价格，包邮（限中国内地）</text>
					</view>
					<view class="tui-promotion-box">
						<tui-tag originLeft padding="12rpx 24rpx" :scaleMultiple="0.8" shape="circle" type="red" plain>满额返券</tui-tag>
						<text>满2件，立减最低2件商品价格，包邮（限中国内地）</text>
					</view>
					<view class="tui-promotion-box">
						<tui-tag originLeft padding="12rpx 24rpx" :scaleMultiple="0.8" shape="circle" type="red" plain>特别赠品</tui-tag>
						<text>满3件，立减最低3件商品价格，包邮（限中国内地）</text>
					</view>
				</view>
			</view>

			<view class="tui-list-cell tui-last">
				<view class="tui-bold tui-cell-title">门店信息</view>
				<view class="tui-addr-box">
					<view class="tui-addr-item">营业时间：<text class="text-grey">每天{{ store.storeOfficeTime }}</text></view>
					<view class="tui-addr-item">门店地址：<text class="text-grey">{{ store.addressDetail }}</text></view>
					<view class="tui-addr-item tui-content-email" @tap="copy(store.storePhone,'电话已复制')">门店电话：<text class="text-grey">{{ store.storePhone }}</text></view>
				</view>
			</view>
			<view class="tui-content-box">
				<view class="tui-content">
					相关资质
				</view>
				<view class="tui-content">
					<image :mode="aspectFit" :src="store.businessLicense"></image>
				</view>
				<view class="tui-content">
					<image :mode="aspectFit" :src="store.certificateFile"></image>
				</view>
			</view>
		</block>
		<tui-loadmore :index="3" v-if="loading"></tui-loadmore>
	</view>
</template>

<script>
	const thorui = require("@/components/common/tui-clipboard/tui-clipboard.js")
	import {
		getDetail
	} from "@/api/store";
	export default {
		data() {
			return {
				top: 0, //标题图标距离顶部距离
				opacity: 0,
				scrollTop: 0.5,
				store: null,
				loading: true
			}
		},
		async onLoad({
			id
		}) {
			if (id) {
				this.getStoreDetail(id);
			}
		},
		methods: {
			back() {
				uni.navigateBack();
			},
			copy: function(text, msg) {
				const that = this
				thorui.getClipboardData(text, (res) => {
					// #ifdef H5 || MP-ALIPAY
					if (res) {
						this.tui.toast(msg)
					} else {
						this.tui.toast("内容复制失败")
					}
					// #endif
				})
			},
			getStoreDetail(id) {
				let that = this;
				getDetail(id).then(res => {
					that.store = res.data;
				});
				that.loading = false;
			}
		}
	}
</script>

<style>
	.container {
		padding-bottom: 120rpx;
		box-sizing: border-box;
	}

	.tui-content-box {
		width: 100%;
		margin-top: 20px;
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 10rpx;
		box-shadow: 0 0 10rpx #eee;
	}

	.tui-list-cell {
		width: 100%;
		position: relative;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		line-height: 26rpx;
		padding: 36rpx 30rpx;
		box-sizing: border-box;
	}

	.tui-bold {
		font-weight: bold;
	}

	.tui-list-cell::after {
		content: '';
		position: absolute;
		border-bottom: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 126rpx;
	}

	.tui-last::after {
		border-bottom: 0 !important;
	}


	.tui-cell-title {
		width: 66rpx;
		padding-right: 30rpx;
		flex-shrink: 0;
	}

	.tui-promotion-box {
		display: flex;
		align-items: center;
		padding: 10rpx 0;
		width: 80%;
	}

	.tui-promotion-box text {
		width: 70%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tui-addr-box {
		width: 76%;
	}

	.tui-addr-item {
		padding: 10rpx;
		line-height: 34rpx;
	}

	.tui-content {
		color: #333;
		font-size: 30rpx;
		line-height: 44rpx;
		padding: 10rpx 0;
		text-align: justify;
	}

	.tui-content-email {
		color: #5677fc !important;
	}

	.text-gray,
	.line-gray,
	.lines-gray {
		color: #aaaaaa;
	}
</style>
